<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var poolFactory = function (fn) {
        var list = [];

        return {
          create: function () {
           return list.length === 0 ? fn.apply(this,arguments) : list.shift
          },
          recover: function (data) {
            list.push(data);
          },
        };
      }

      var iframeFactory = poolFactory(function () {
        var iframe = document.createElement("iframe")
        document.body.appendChild(iframe)
        iframe.onload = function () {
          iframe.onload =  null 
          iframeFactory.recover(iframe)
        }
        return iframe
      })
      var iframe1 = iframeFactory.create();
      console.log(iframe1);
      iframe1.src = 'http://www.baidu.com';

      var iframe2 = iframeFactory.create();
      console.log(iframe2);
      iframe2.src = 'http://www.baidu.com';

      setTimeout(function(){
          var iframe3 = iframeFactory.create();
          console.log(iframe3);
         iframe3.src = 'http://www.baidu.com';
      }, 3000 );
    </script>
  </body>
</html>
